<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏</title>
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>
        我刚才随机选中一个100以内的自然数。看你能否在10次以内猜中它。每次我都会告诉你所猜的结果是高还是低了
    </p>
   
    <div class="form">
        <label for="guessField">请猜数：</label>
        <input type="text" id="guessField"  class="guessField"/>
        <input type="submit" value="确定"  class="guessSubmit"/>
    </div>

    <div class="resultParas">
     <p class="guesses"></p>
     <p class="lastResult"></p>
     <p class="lowOrHi"></p>
    </div>
    <script>
        let randomNumber=Math.floor(Math.random()*100)+1;
        const guesses=document.querySelector('.guesses');
        const lastResult=document.querySelector('.lastResult');
        const lowOrHi=document.querySelector('.lowOrHi');
        const guessSubmit=document.querySelector('.guessSubmit');
        const guessField=document.querySelector('.guessField');
         let guessCount=1;
        let resetButton;
         function checkGuess(){
             let userGuess=Number(guessField.value);
             alert(userGuess);
             if(guessCount===1){
                guesses.textContent='上次猜的数：';
             }
             guesses.textContent+=userGuess+' ';
             if(userGuess===randomNumber){
                 lastResult.textContent='恭喜你猜对了！';
                 lastResult.style.backgroundColor='green';
                 lowOrHi.textContent='';
                 setGameOver();
             }else if(guessCount===10){
                 lastResult.textContent='游戏结束！！！！';
                 setGameOver();
             }else{
                  lastResult.textContent='你猜对了！！！！';
                  lastResult.style.backgroundColor='red';
                  if(userGuess<randomNumber){
                      lowOrHi.textContent='你猜低了！！！';
                  }else if(userGuess>randomNumber){
                      lowOrHi.textContent='你猜高了！！！';
                  }


             }

             guessCount++;
             guessField.value=' ';
             guessField.focus();
         }
             guessSubmit.addEventListener('click',checkGuess);

             function setGameOver(){
                 guessField.disabled=true;
                 guessSubmit.disabled=true;
                 resetButton=document.createElement('button');
                 resetButton.textContent='开始新游戏';
                 document.body.appendChild(resetButton);
                 resetButton.addEventListener('click',resetGame);
             }

             function resetGame(){
                 guessCount=1;
                 const resetParas=document.querySelectorAll('.resultParas p');
                 for(let i=0;i<resetParas.length;i++){
                     resetParas[i].textContent=' ';
                 }

                 resetButton.parentNode.removeChild(resetButton);
                 guessField.disabled=false;
                 guessSubmit.disabled=false;
                 guessField.value=' ';
                 guessField.focus();

                 lastResult.style.backgroundColor='white';
                 randomNumber=Math.floor(Math.random()*100)+1;

             }
         

        </script>
</body>
</html>